@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap');

        * {
            padding: 0;
            margin: auto;
            box-sizing: border-box;
            text-decoration: none;
            font-family: "Poppins";
            list-style: none;
        }

        /* General Styling */
        header {
            width: 100%;
            height: 70px;
            background-color: rgb(12, 6, 99);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            margin: 0 auto;
        }

        .logo-container {
            margin-left: -1.4rem;
        }

        /* .logo-container img {
    height: 60px;
    width: 100%;
} */
        .logo-container img {
            /* width: 100%; */
            height: 100%;
        }


        nav ul {
            display: flex;
            list-style: none;
        }

        nav ul li {
            margin-right: 1rem;
        }

        nav ul li a {
            color: rgb(71, 59, 246);
            padding: 8px 18px;
            text-decoration: none;
            transition: all 0.5s ease-in-out;
            border-radius: 30px;
        }

        nav ul li a:hover {
            background-color: rgb(12, 6, 99);
            color: #fff;
        }

        .sign-up-btn a {
            color: white;
            background: rgb(71, 59, 246);
            border-radius: 25px;
            padding: 10px 15px;
            transition: all 0.5s ease-in-out;
            text-decoration: none;
        }

        .sign-up-btn a:hover {
            color: rgb(12, 6, 99);
        }

        .hamburger {
            display: none;
        }

        /* Home Section Styling */
        .home-section-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            /* padding: 20px; */
        }

        .home-section h1 {
            font-size: 3rem;
            margin-bottom: 1rem;
            font-weight: bolder;
            color: rgb(12, 6, 99);
        }

        .home-section span p {
            color: #2c314e;
            margin-bottom: 2.5rem;
        }


        .sign-up-btn-btn a {
            color: white;
            background: rgb(71, 59, 246);
            border-radius: 25px;
            padding: 10px 15px 10px 15px;
            transition: all 0.5s ease-in-out;
            margin-top: 2rem;
            margin-left: 30%;
        }

        .sign-up-btn-btn a:hover {
            color: rgb(12, 6, 99);
        }


        .home-img img {
            max-width: 100%;
            height: auto;
        }

        /* Mobile View (up to 768px) */
        @media only screen and (max-width: 768px) {
            .hamburger {
                display: block;
                cursor: pointer;
                color: white;
                margin-right: 1rem;
            }

            nav {
                position: absolute;
                left: -100%;
                top: 0;
                z-index: 999;
                width: 70%;
                height: 60%;
                background: #fefefe;
                transition: left 0.5s ease-in-out;
                box-shadow: 2px 0 20px 0 rgba(0, 0, 0, 0.05);
            }

            #nav_check:checked~nav {
                left: 0;
            }

            nav ul {
                flex-direction: column;
                padding: 20px;
                margin-top: 50px;
            }

            nav ul li {
                margin-bottom: 10px;
            }

            .sign-up-btn {
                display: none;
            }

            .home-section {
                flex-direction: column;
                padding: 20px;
                height: auto;

            }

            .home-section h1 {
                font-size: 1.9rem;
                text-align: center;

            }

            .home-section span p {
                color: #fff;
            }



            .home-section {
                background: rgba(0, 0, 0, 0.5);
                width: 100%;
                height: 100%;
                color: #fff;
                padding: 20px;
            }

            .home-section-container {
                background: url(../images/insurance-family-03.png) center/cover no-repeat;
                width: 100%;
                align-items: center;
                justify-content: center;
            } 

            .home-section .text {
                max-width: 80%;
                margin: 0 auto;
                text-align: center;
                z-index: 1;
            }

            .home-img {
                display: none;
            }

            .sign-up-btn-btn {
                margin-top: 2rem;

            }

        }

        /* Tablet View (768px to 1024px) */
        @media only screen and (min-width: 768px) and (max-width: 1024px) {
            .home-section-container {
                flex-direction: row;
                padding: 20px;

            }

            /* .home-section .text {
                max-width: 50%;
            } */

            .home-img img {
                max-width: 100%;
                height: auto;
            }
        }

        /* Desktop View (1024px and above) */
        @media only screen and (min-width: 1024px) {
            .home-section-container {
                max-width: 1200px;
                margin: 0 auto;
                flex-direction: row;
                padding: 20px;
            }

            /* .home-section .text {
                max-width: 50%;
            } */

            .home-img img {
                max-width: 100%;
                height: auto;
            }
        }

        .section-service-section {
            /* height: 70vh; */
            max-width: 100%;
            width: 100%;
            display: grid;
            place-items: center;

        }

        .section-heading h3 {
            font-size: 2rem;
            font-weight: bolder;
            color: rgb(12, 6, 99);
            margin-bottom: 2rem;
            text-transform: uppercase;
        }

        .row {
            display: flex;
            flex-wrap: wrap;
        }

        .column {
            width: 100%;
            padding: 0 1rem 1rem 1rem;
            text-align: center;
        }

        .card {
            width: 100%;
            height: 100%;
            padding: 2rem 1.5rem;
            background: linear-gradient(#ffff 50%, rgb(12, 6, 99) 50%);
            background-size: 100% 200%;
            background-position: 0 2.5%;
            border-radius: 5px;
            box-shadow: 0 0 35px rgba(0, 0, 0, 0.12);
            cursor: pointer;
            transition: all 0.5s ease-in-out;
        }
        .card   .lifeInsuranceLink a {
            color:#fff;
            text-decoration: none;
            background-color: rgb(12, 6, 99); 
            padding: .3rem .5rem;
             border-radius: 20px;
             transition: all 0.5s ease-in-out;
             font-size: 17px;

        }
    
        .lifeInsuranceLink a:hover {
            color: rgb(12, 6, 99);
            background-color: #fff; /* Change the hover color to white */
        }

        h3 {
            font-size: 20px;
            font-weight: 600;
            color: rgb(12, 6, 99);
            margin: 1rem 0;
        }

        p {
            color: #2c314e;
            font-size: 15px;
            line-height: 1.6;
            letter-spacing: 0.03em;
        }

        .icon-wrapper {
            background-color: rgb(12, 6, 99);
            position: relative;
            margin: auto;
            font-size: 30px;
            height: 2.5rem;
            width: 2.5rem;
            color: #fff;
            display: grid;
            place-items: center;
            border-radius: 20px;
            transition: 0.5s;
        }

        #property {
            font-size: 20px;
        }

        #care {
            font-size: 20px;
        }

        #final {
            font-size: 20px;
        }

        #medicare {
            font-size: 20px;
        }

        #health {
            font-size: 20px;
            align-items: center;
            text-align: center;
            padding: 5px 5px;
        }

        #life {
            font-size: 20px;

        }

        .card:hover {
            background-position: 0 100%;
        }

        .card:hover .icon-wrapper {
            background-color: #fff;
            color: rgb(12, 6, 99);
        }

        .card:hover h3 {
            color: #fff;
        }

        .card:hover p {
            color: #f0f0f0;
        }

        /* @media only screen and (min-width: 375px) {
    .section-service-section {
        padding: 0 2rem;
    }

    .column {
        flex: 0 50%;
        max-width: 50%;
    }
} */


        /* @media screen and (min-width:1024px) {
    .section-service-section {
        padding: 1rem 3rem;
    }

    .column {
        flex: 0 0 33.33%;
        max-width: 33.33%;
    }
} */



        @media only screen and (max-width: 768px) {
            .column {
                flex: 0 0 100%;
                max-width: 100%;
            }
        }

        @media only screen and (min-width: 768px) and (max-width: 1024px) {
            .column {
                flex: 0 0 50%;
                max-width: 50%;
            }
        }

        @media only screen and (min-width: 1024px) {
            .column {
                flex: 0 0 33.33%;
                max-width: 33.33%;
            }
        }

        .details-container {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-bottom: 20px;
            padding: 0 10px;
        }

        .intro-text-title,
        .benefit-details {
            /* flex: 1 1 100%; */
            max-width: 100%;
            margin-bottom: 20px;
            text-align: center;
        }

        .intro-text-title {
            color: rgb(12, 6, 99);
            font-size: 1.5rem;
            padding: 10px;
        }

        .intro-text-content {
            color: #2c314e;
            font-size: 1rem;
            text-align: left;
            padding: 10px;
        }

        .benefit-title {
            color: rgb(12, 6, 99);
            font-size: 1.5rem;
            margin-bottom: 10px;
            padding: 10px;
        }

        .benefit-info {
            color: #2c314e;
            font-size: 1rem;
            line-height: 1.8rem;
            padding: 10px;
        }

        .benefit-info ul {
            list-style: none;
            padding: 0;
        }

        .benefit-info ul li {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .benefit-info ul li i {
            margin-right: 10px;
            color: rgb(12, 6, 99);
        }

        @media only screen and (max-width: 768px) {
            .details-container {
                flex-direction: column;
                padding: 0 15px;
            }

            .intro-text-title,
            .benefit-details {
                max-width: 100%;
                margin-bottom: 20px;
            }

            .intro-text-content,
            .benefit-info {
                font-size: 1rem;
                padding: 15px;
            }

            .benefit-title {
                font-size: 1.4rem;
            }
        }

        @media only screen and (max-width: 480px) {

            .intro-text-title,
            .benefit-details {
                max-width: 100%;
            }

            .intro-text-content,
            .benefit-info {
                font-size: 0.9rem;
                padding: 10px;
            }

            .benefit-title {
                font-size: 1.2rem;
            }
        }

        .faq-container {
            min-height: 100vh;
            width: 96%;
            margin: 0 auto;

        }

        .faq-title {
            margin: 2rem 0rem;
            text-align: center;
            color: rgb(12, 6, 99);
            font-size: 2rem;
            font-weight: bold;
        }

        .faq {
            max-width: 700px;
            margin-top: 2rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid rgb(12, 6, 99);
            cursor: pointer;
        }

        .faq-question {
            display: flex;
            justify-content: space-between;
            align-items: center;

        }

        #question {
            color: rgb(12, 6, 99);
            font-weight: normal;
            font-size: 1.36rem;
        }

        .faq-answer p {
            padding-top: 0.5rem;
            line-height: 1.6;
            font-size: 1rem;
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 1.4s ease-in-out;
        }

        .faq:active .faq-answer {
            max-height: 300px;
            animation: fade 1s ease-in-out;

        }

        .faq:active i {
            transform: rotate(180deg);
        }

        i {
            transition: transform 0.5s ease-in;
        }

        @keyframes fade {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

            to {
                opacity: 1;
                transform: translateY(0px);
            }
        }

        .about-us-container {
            width: 90%;
            margin: 50px auto;
            padding: 20px;
        }

        .about-us-title {
            text-align: center;
            font-size: 40px;
            font-weight: bold;
            margin-bottom: 20px;
            color: rgb(12, 6, 99);
        }

        .about-us-content {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }

        .about-img {
            flex: 1;
            margin-right: 20px;
            overflow: hidden;
            transition: transform 0.3s ease;
        }

        .about-text-content {
            flex: 1;
            margin-left: 10px;
        }

        .about-img img {
            width: 100%;
            height: auto;
        }

        .about-text-content p {
            line-height: 1.6;
            transition: all 0.3s ease-in-out;
        }

        .readmore-btn {
            margin-top: 20px;
            display: inline-block;
            background-color: rgb(12, 6, 99);
            color: #fff;
            text-decoration: none;
            padding: 10px 20px;
            border-radius: 10px;
            transition: all 0.5s ease-in-out;
            cursor: pointer;
        }

        .readmore-btn:hover {
            background-color: rgb(71, 59, 246);
            color: #fff;
        }

        .read-more {
            max-height: 0;
            overflow: hidden;
            color: #2c314e;
            font-size: 15px;
            line-height: 1.6;
            letter-spacing: 0.03em;
            transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
            display: inline-block;
        }

        .read-more.expand {
            max-height: 500px;
        }

        #readmore-btn {
            border: none;
            background: none;
            color: #fff;
            cursor: pointer;
            transition: all 0.5s ease-in-out;
        }

        @media screen and (max-width: 768px) {
            .about-us-content {
                flex-direction: column;
            }

            .about-img,
            .about-text-content {
                margin: 0;
                margin-bottom: 20px;
            }

            .about-us-title {
                font-size: 35px;
            }
        }

        @media screen and (max-width: 375px) {
            .about-us-container {
                width: 95%;
            }

            .about-us-title {
                font-size: 30px;
            }

            .about-text-content p {
                font-size: 14px;
            }

            .readmore-btn {
                padding: 8px 16px;
            }

            #readmore-btn {
                font-size: 14px;
            }
        }

        /* 
';fv][;rg][]' */




        /* General Footer Styles */
        footer {
            background-color: rgb(12, 6, 99);
            color: #fff;
            padding: 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            box-sizing: border-box;
        }

        /* Flexbox for Footer Sections */
        footer>div {
            flex: 1 1 100%;
            /* Full width on small screens */
            margin-bottom: 20px;
        }

        /* Social Media Icons */
        .social {
            text-align: center;
        }

        .social-title h3 {
            color: #fff;
            font-weight: 300;
        }

        .social-logo {
            display: flex;
            justify-content: center;

        }

        .social-logo i {
            font-size: 24px;

        }

        /* About Section */
        .about-title h3 {
            color: #fff;
            font-weight: 300;
            text-align: center;
        }

        .address,
        .phone,
        .email {
            margin-bottom: 10px;
            color: #fff;
        }

        .address i,
        .phone i,
        .email i {
            margin-right: 10px;

        }

        /* Contact Form */
        .message {
            text-align: center;
        }

        .search {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .search input {
            width: 100%;
            padding: 8px;
            border-radius: 5px;
            border: none;
        }

        .search i {
            font-size: 20px;
            color: #007BFF;
            /* Button color */
        }

        /* Information Links */
        .info-title h3 {
            color: #fff;
            font-weight: 300;
            text-align: center;
        }

        .info-link ul {
            list-style: none;
            padding: 0;
            text-align: center;
        }

        .info-link li {
            margin-bottom: 10px;
            text-decoration: none;

        }

        .info-link a {
            color: #9d9999;
            text-decoration: none;
            font-weight: 300;
        }

        .info-link a:hover {
            text-decoration: underline;
        }

        /* Feedback Section */
        .feedback-title h3 {
            color: #fff;
            font-weight: 600;
            text-align: center;
        }

        .msg-box {
            margin-bottom: 10px;
        }

        .msg-box input {
            width: 100%;
            padding: 8px;
            border-radius: 5px;
            border: none;
            background: #fff;
        }

        .feed-btn {
            text-align: center;
        }

        .feed-btn button {
            background-color: #007BFF;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }

        .feed-btn button:hover {
            background-color: #0056b3;
        }

        /* Media Queries for Responsiveness */
        @media (min-width: 600px) {
            footer {
                flex-wrap: nowrap;
                /* Prevent wrapping on larger screens */
            }

            .social,
            .about,
            .information,
            .feedback {
                flex: 1 1 22%;
                /* Adjust width for larger screens */
                margin-bottom: 0;
            }
        }

        @media (max-width: 599px) {
            .social-logo i {
                font-size: 20px;
                /* Adjust icon size for smaller screens */
            }

            .search input {
                width: calc(100% - 40px);
                /* Adjust width for better fit */
            }

            .feedback input {
                height: 150px;
                /* Set fixed height for feedback box */
            }
        }